<template>
  <div class="nav-box">
    <div class="search-box">
      <div class="logo">
        <img src="/image/common/logo.png" alt="" />
      </div>
      <div class="button">
        <div class="search-input">
          <input class="input" v-model="searchCont" type="text" :placeholder="input.topSeach" />
          <div class="icon-btn" @click="search">
            <img src="/image/icon/search.png" alt="" />
          </div>
        </div>
        <div class="search-icon" @click="showCollect">
          <img src="/image/icon/shoucang8.png" alt="" />
        </div>
        <div class="search-icon" @click="goMine">
          <img src="/image/icon/user.png" alt="" />
        </div>
      </div>
    </div>
    <div v-if="cShow" class="c-box">
      <PageDetailCollectBox
        :collectList="collectList"
        @mouseleave="closeCollect"
        @delCollect="delCollect"
      />
    </div>
  </div>
  <div class="nav">
    <div class="nav-list" v-for="item in navs" @click="goRouter(item.routeName)">
      {{ item?.title }}
      <div v-if="item.routeName.indexOf(routeName) >= 0" class="bor"></div>
    </div>
  </div>
</template>
<style lang="stylus" scoped>
.nav-box{
  padding 0 30px
  min-width 1080px
  .search-box{
    display flex
    height 120px
    min-width 1080px
    justify-content space-around
    align-items center
  }
  .c-box{
    position absolute
    top 120px
    right 150px
    z-index 99
  }
}
.button {
  display flex
  align-items center
  overflow hidden
  .search-icon{
    position relative
    width 18px
    margin 2px 10px 0
    cursor pointer
    img{
      width 100%
    }
  }
  .search-input{
    width 312px
    height 30px
    border-radius 30px
    border 1px solid #000
    display flex
    align-items center
    justify-content space-between
    padding 0 15px 0 10px
    .input{
      border 0
      width 280px
      &:focus{
        outline 0
      }
    }
    .icon-btn{
      cursor pointer
      width 14px
      margin-top 4px
      img{
        width 100%
      }
    }
  }
}
.nav{
  display flex
  width 1080px
  margin 0 auto
  border-bottom 1px solid #E1E1E1
  justify-content center
  .nav-list{
    padding  16px 40px
    position relative
    cursor pointer
    .bor{
      border-bottom 3px solid #000
      position absolute
      bottom 0
      left 0px
      width 100%
    }
  }
}
</style>
<script lang="ts" setup>
import { language } from "~/conf";
import { loginStore } from "@/components/store";
const loginStores = loginStore();
const router = useRouter();
const { nav, input } = language;
const routeName = ref<string>("err");
const navs = [
  {
    routeName: "index",
    title: nav.Home,
  },
  {
    routeName: "process",
    title: nav.Process,
  },
  {
    routeName: "products",
    title: nav.Products,
  },
  {
    routeName: "about",
    title: nav.About,
  },
];
type Tcollect = {
  picUrl: string;
  price: number;
  spuId: number;
  spuName: string;
  id: number;
};
let searchCont = ref<string>("");
let collectList = ref<Tcollect[]>([]);
let cShow = ref(false);
const goRouter = (routeNameString: string) => {
  router.push({ name: routeNameString });
  routeName.value = routeNameString;
};
watchEffect(() => {
  routeName.value = router.currentRoute.value.name as string;
});
const search = () => {
  router.push({ name: "process", query: { q: searchCont.value } });
};
const goMine = () => {
  if (!localStorage.getItem("userData")) {
    return (loginStores.needPoup = true);
  }
  router.push({ name: "mine" });
};
const showCollect = async () => {
  const { data, code } = await useServerFetch<{
    list: Tcollect[];
  }>("/app-api/product/favorite/page", {
    method: "post",
    body: {
      pageNo: 1,
      pageSize: 100,
    },
  });
  if (code === 0) {
    if (data.list && data.list.length) {
      collectList.value = data.list;
    }
    cShow.value = true;
  }
  if (code == 401) {
    loginStores.needPoup = true;
  }
};
const closeCollect = () => {
  cShow.value = false;
};
const delCollect = (id: number) => {
  let list = collectList.value.filter((item) => item.spuId != id);
  collectList.value = list;
};
</script>
